<template>
<div>
    
<div id="sky">
  <div class="bird">
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="bird_body">
      <div class="bird_head"></div>
      <div class="bird_wing_left">
        <div class="bird_wing_left_top"></div>
      </div>
      <div class="bird_wing_right">
        <div class="bird_wing_right_top"></div>
      </div>
      <div class="bird_tail_left"></div>
      <div class="bird_tail_right"></div>
    </div>
  </div>
</div>
</div>
</template>

<script>
export default {
 
  
    data() {
      return {
        

      };
    },
   
    created() {
      
    },
    mounted() {
       
    },
    

    methods:{

    },
}
</script>

<style scoped lang="scss">
body {
  background: #eef;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sky {
  margin-top: -60px;
  perspective: 400px;
  filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
}
@-moz-document url-prefix() {
  #sky {
    filter: none;
  }
}
#sky div {
  transform-style: preserve-3d;
}
#sky .bird {
  -webkit-animation: fly 10000ms linear infinite;
          animation: fly 10000ms linear infinite;
}
#sky .bird .wind {
  position: absolute;
  left: 50%;
  width: 4px;
  height: 200px;
  margin-left: -2px;
  border-radius: 999px;
  overflow: hidden;
}
#sky .bird .wind:nth-child(1) {
  transform: translate3d(109px, -148px, -18px) rotateY(90deg);
}
#sky .bird .wind:nth-child(1)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 159, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2518ms 1922ms linear infinite;
          animation: wind 2518ms 1922ms linear infinite;
}
#sky .bird .wind:nth-child(2) {
  transform: translate3d(2px, 89px, -41px) rotateY(90deg);
}
#sky .bird .wind:nth-child(2)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 164, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1145ms 3863ms linear infinite;
          animation: wind 1145ms 3863ms linear infinite;
}
#sky .bird .wind:nth-child(3) {
  transform: translate3d(-192px, -21px, -73px) rotateY(90deg);
}
#sky .bird .wind:nth-child(3)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 205, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2314ms 3546ms linear infinite;
          animation: wind 2314ms 3546ms linear infinite;
}
#sky .bird .wind:nth-child(4) {
  transform: translate3d(59px, -94px, 61px) rotateY(90deg);
}
#sky .bird .wind:nth-child(4)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 241, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1208ms 1334ms linear infinite;
          animation: wind 1208ms 1334ms linear infinite;
}
#sky .bird .wind:nth-child(5) {
  transform: translate3d(-47px, -43px, -19px) rotateY(90deg);
}
#sky .bird .wind:nth-child(5)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 182, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1766ms 1843ms linear infinite;
          animation: wind 1766ms 1843ms linear infinite;
}
#sky .bird .wind:nth-child(6) {
  transform: translate3d(-180px, 110px, -60px) rotateY(90deg);
}
#sky .bird .wind:nth-child(6)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 72, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1047ms 2743ms linear infinite;
          animation: wind 1047ms 2743ms linear infinite;
}
#sky .bird .wind:nth-child(7) {
  transform: translate3d(71px, -27px, 67px) rotateY(90deg);
}
#sky .bird .wind:nth-child(7)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 6, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2488ms 2122ms linear infinite;
          animation: wind 2488ms 2122ms linear infinite;
}
#sky .bird .wind:nth-child(8) {
  transform: translate3d(-11px, -76px, 20px) rotateY(90deg);
}
#sky .bird .wind:nth-child(8)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 248, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2529ms 1690ms linear infinite;
          animation: wind 2529ms 1690ms linear infinite;
}
#sky .bird .wind:nth-child(9) {
  transform: translate3d(51px, -94px, 41px) rotateY(90deg);
}
#sky .bird .wind:nth-child(9)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 164, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 1181ms 4734ms linear infinite;
          animation: wind 1181ms 4734ms linear infinite;
}
#sky .bird .wind:nth-child(10) {
  transform: translate3d(-90px, 140px, -4px) rotateY(90deg);
}
#sky .bird .wind:nth-child(10)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 92, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2433ms 4703ms linear infinite;
          animation: wind 2433ms 4703ms linear infinite;
}
#sky .bird .wind:nth-child(11) {
  transform: translate3d(-124px, -52px, -92px) rotateY(90deg);
}
#sky .bird .wind:nth-child(11)::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 300px;
  background: rgba(100, 200, 235, 0.3);
  border-radius: 999px;
  transform: translateY(-300px);
  -webkit-animation: wind 2054ms 3218ms linear infinite;
          animation: wind 2054ms 3218ms linear infinite;
}
#sky .bird_body {
  position: relative;
  width: 30px;
  height: 40px;
  background: #85b8ed;
}
#sky .bird_head {
  position: absolute;
  top: -30px;
  border-right: 15px solid transparent;
  border-bottom: 30px solid #ac82d4;
  border-left: 15px solid transparent;
  transform-origin: 50% 100%;
  transform: rotateX(-20deg);
}
#sky .bird_wing_left {
  position: absolute;
  left: -30px;
  height: 30px;
  border-right: 30px solid #7882e8;
  border-bottom: 10px solid transparent;
  transform-origin: 100% 0;
  -webkit-animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
#sky .bird_wing_left_top {
  position: absolute;
  left: -30px;
  border-right: 30px solid #a9c6e5;
  border-bottom: 30px solid transparent;
  transform-origin: 100% 0;
  -webkit-animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
          animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
}
#sky .bird_wing_right {
  position: absolute;
  left: 30px;
  height: 30px;
  border-left: 30px solid #967fe3;
  border-bottom: 10px solid transparent;
  transform-origin: 0 0;
  -webkit-animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
          animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
}
#sky .bird_wing_right_top {
  position: absolute;
  border-left: 30px solid #c1bad7;
  border-bottom: 30px solid transparent;
  transform-origin: 0 0;
  -webkit-animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
          animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
}
#sky .bird_tail_left {
  position: absolute;
  top: 40px;
  border-right: 30px solid transparent;
  border-top: 40px solid #adbff9;
  transform-origin: 50% 0;
  transform: rotateX(-20deg);
}
#sky .bird_tail_right {
  position: absolute;
  top: 40px;
  border-left: 30px solid transparent;
  border-top: 40px solid #9eb3e9;
  transform-origin: 50% 0;
  transform: rotateX(-20deg);
}

@-webkit-keyframes fly {
  0% {
    transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
  }
  100% {
    transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
  }
}

@keyframes fly {
  0% {
    transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
  }
  100% {
    transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
  }
}
@-webkit-keyframes wingLeft {
  0% {
    transform: rotateY(-40deg);
  }
  100% {
    transform: rotateY(40deg);
  }
}
@keyframes wingLeft {
  0% {
    transform: rotateY(-40deg);
  }
  100% {
    transform: rotateY(40deg);
  }
}
@-webkit-keyframes wingRight {
  0% {
    transform: rotateY(40deg);
  }
  100% {
    transform: rotateY(-40deg);
  }
}
@keyframes wingRight {
  0% {
    transform: rotateY(40deg);
  }
  100% {
    transform: rotateY(-40deg);
  }
}
@-webkit-keyframes wind {
  0% {
    transform: translateY(-300px);
  }
  100% {
    transform: translateY(200px);
  }
}
@keyframes wind {
  0% {
    transform: translateY(-300px);
  }
  100% {
    transform: translateY(200px);
  }
}
</style>
